<!--
 * @Descripttion: 
 * @version: 
 * @Author: 高月飞
 * @Date: 2023-11-15 16:50:09
 * @LastEditors: 高月飞
 * @LastEditTime: 2023-11-25 20:21:44
-->
<template>
    <div>
        <el-table border :data="data" style="width: 100%" @selection-change="handleSelectionChange"
            :header-cell-style="{ textAlign: 'center' }" :cell-style="{ textAlign: 'center' }">
            <el-table-column type="selection" width="55" />
            <el-table-column prop="realname" label="姓名" />
            <el-table-column prop="username" label="账号" />
            <el-table-column prop="phone" label="手机号" />
            <el-table-column prop="birthday" label="生日" />
            <el-table-column label="性别">
                <template #default="{ row: { sex } }">
                    <el-tag type="success" v-if="sex === '1'">先生</el-tag>
                    <el-tag type="danger" v-else>女士</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template #default="{ row }">
                    <el-button type="primary" size="small" @click="editFromData(row)">编辑</el-button>
                    <el-button type="danger" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="demo-pagination-block">
            <el-pagination :page-sizes="[10, 20, 30, 50, 100, 200, 500]" background
                layout="total, sizes, prev, pager, next, jumper" :total="total" :current-page="page"
                @current-change="changePage" />
        </div>
    </div>
</template>

<script setup lang="ts">
/**
 * 导入配置
 * ref
 * 路由 和路由对象
 */
import { ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'
/**
 * 定义Props
 */
 interface IUserInfo {
    id?: number
    url?: string
    username?: string;
    realname?: string;
    sex?: string;
    phone?: string;
    birthday?: string;
    avatar?: string;
    role?: number | string;

}
interface IProps {
    page: number
    total: number
    data: IUserInfo[]
    loadData: (page: number) => void
}
/**
 * 接收props数据
 */
const props = defineProps<IProps>()


/**
 * 接收数据
 * 接收路由
 * 接收路由对象
 * 
 */
const route = useRoute()
const router = useRouter()


/**
 * 处理事件
 *  @param changePage 换页
 * 发送选中删除自定义事件
 *  @param changePage 批量删除选中
 *  @param  editFromData 编辑修改用户
 */
const changePage = (page: number) => {
    props.loadData(page)
    const query = { ...route.query, page }
    router.replace({ query })
}
const emit = defineEmits<{
    // (e: 'onSelectUid', ids: number[]): void
    onSelectUid: [ids: number[]]
    onEditUser: [id: number]
}>()

const handleSelectionChange = (val: IUserInfo[]) => {
    const ids: number[] = val.filter(item => item.id !== undefined).map(item => item.id!);
    emit('onSelectUid', ids)
}

const editFromData = (record: IUserInfo) => {
    emit('onEditUser', record.id!)
}
</script>

<style lang="scss" scoped>
.demo-pagination-block+.demo-pagination-block {
    margin-top: 10px;
}

.demo-pagination-block .demonstration {
    margin-bottom: 16px;
}

.el-table {
    margin-bottom: 20px;
}
</style>